import { FC, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { getHotSearch, HotItem } from "@/api/search/index";
interface IProps {
  setSearchValue(text: string): void;
}

const History: FC<IProps> = ({ setSearchValue }) => {
  const [hotList, setHotList] = useState<HotItem[]>([]);
  useEffect(() => {
    getHotSearch().then((result) => {
      setHotList(result);
    });
    return () => {};
  }, []);

  const setInputValue = (value: string) => {
    setSearchValue(value);
  };
  return (
    <div className={styles.HotSearch}>
      <div className={styles.historyTitle}>热搜榜</div>
      <div className={styles.historyListWrap}>
        {hotList.length > 0 ? (
          hotList?.map((it, index) => {
            return (
              <div className={styles.searchItem} key={index}>
                <div
                  className={styles.name}
                  onClick={() => setInputValue(it.searchWord)}
                >
                  {it.searchWord}
                </div>
              </div>
            );
          })
        ) : (
          <div></div>
        )}
      </div>
    </div>
  );
};

export default History;
